import React, { Component } from 'react'
import '../css/Header.scss'
import '../css/Section.scss'
import '../css/Footer.scss'
import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";
import { Input, Select, AutoComplete, Button  } from 'antd';
import HomePage from './HomePage'
import Understand from './understand'
import Appointment from './appointment'
import StarTeam from './StarTeam'
import Evaluate from './evaluate'
import TrainingEnrollment from './TrainingEnrollment'
import HomeHealth from './HomeHealth'
import ShoppingMall from './ShoppingMall'
const InputGroup = Input.Group;
const Option = Select.Option;
class Section extends Component {
  constructor(){
    super()
    this.state = {
      nav : [{
        id : 1,
        name : '首页'
      },{
        id : 2,
        name : '了解我们'
      },{
        id : 3,
        name : '服务预约'
      },{
        id : 4,
        name : '明星团队'
      },{
        id : 5,
        name : '服务评价'
      },{
        id : 6,
        name : '培训招生'
      },{
        id : 7,
        name : '居家健康'
      },{
        id : 8,
        name : '购物商城'
      }],
      currentIndex : 1,
    }
  }
  render() {
    let _this = this;
    return (
      <Router>
        <div className="PageBox">
          <div className="header">
            <div className="header_icon">
              <span></span>
              <p>顺义区生活性服务平台</p>
            </div>
            <div className="_header_from">
              <InputGroup compact>
                <Select defaultValue="Sign Up">
                  <Option value="Sign Up">家政服务</Option>
                  <Option value="Sign In">家政服务1</Option>
                </Select>
                <AutoComplete
                  style={{ width: 383}}
                  size="default"
                  placeholder="保姆 家政人员 月嫂 保洁 维修"
                />
                <Button type="primary" icon="search" style={{backgroundColor:'#64AB28',width:112}}>搜索</Button>
              </InputGroup>
            </div>
            <div className="_header_login">
              <p onClick={()=>{
                this.props.history.push("/register/personal")
              }}>注册</p>
              <p>登录</p>
            </div>
          </div>
          <div className="_section">
            <ul className="_section_nav">
              {
                this.state.nav.map((item,index)=>{
                  let tabStyle=item.id==this.state.currentIndex ? 'hover _nav_li' : '_nav_li';
                return <li key={index} onClick={this.tabCar.bind(_this,item.id)}  className={tabStyle}><Link to={item.id ===2 ? '/HomePage2/survey' : `/HomePage${item.id}`}>{item.name}</Link></li>
                })
              }
            </ul>
            <Route path="/HomePage1" component={HomePage}></Route>
            <Route path="/HomePage2/survey" component={Understand}></Route>
            <Route path="/HomePage3" component={Appointment}></Route>
            <Route path="/HomePage4" component={StarTeam}></Route>
            <Route path="/HomePage5" component={Evaluate}></Route>
            <Route path="/HomePage6" component={TrainingEnrollment}></Route>
            <Route path="/HomePage7" component={HomeHealth}></Route>
            <Route path="/HomePage8" component={ShoppingMall}></Route>
          </div>
          <div className="_footer">
            <p>Copyright © 2013-2018 北京嘉乐会家政服务有限公司 版权所有</p>
            <p>办公地址：顺义区站前东街天地悦港城C座704室</p>
            <p>网址：http://syjzxh.com.cn/</p>
          </div>
        </div>
      </Router>
    )
  }
  tabCar(id){
    this.setState({
      currentIndex : id
    })
  }
}
export default withRouter(Section);